new Vue({
    el: '#database-config-app',
    data: {
        currentView: 'database', // 当前视图：'database' 或 'knowledge',

        // 数据库配置相关数据
        databaseName: '',
        urlDb: '',
        usernameDb: '',
        passwordDb: '',
        dbUploadedFileName: '',
        connectedDatabases: [],

        // 知识文档配置相关数据
        docUploadedFileName: '',
        connectedKnowledgeDocs: [],

        // 搜索关键字
        searchQueryDatabase: '',
        searchQueryKnowledge: '',

        // 过滤后的列表
        filteredDatabases: [],
        filteredKnowledgeDocs: [],
    },
    mounted() {
        // 从 localStorage 获取数据库登录信息
        this.urlDb = localStorage.getItem('db_url') || '';
        this.usernameDb = localStorage.getItem('db_username') || '';
        this.passwordDb = localStorage.getItem('db_password') || '';

        // 初始化时加载已保存的数据库列表
        try {
            this.connectedDatabases = JSON.parse(localStorage.getItem('connectedDatabases')) || [];
        } catch (error) {
            this.connectedDatabases = [];
        }

        // 初始化时加载已保存的知识文档列表
        try {
            this.connectedKnowledgeDocs = JSON.parse(localStorage.getItem('connectedKnowledgeDocs')) || [];
        } catch (error) {
            this.connectedKnowledgeDocs = [];
        }

        // 初始化过滤后的列表为全部数据
        this.filteredDatabases = this.connectedDatabases;
        this.filteredKnowledgeDocs = this.connectedKnowledgeDocs;
    },
    methods: {
        // 数据库配置方法
        saveDatabaseConfig() {
            // 保存数据库配置到 localStorage
            localStorage.setItem('db_url', this.urlDb);
            localStorage.setItem('db_username', this.usernameDb);
            localStorage.setItem('db_password', this.passwordDb);
            Swal.fire('成功', '数据库配置已保存', 'success');

            // 同时保存已连接的数据库列表
            localStorage.setItem('connectedDatabases', JSON.stringify(this.connectedDatabases));

            // 重新执行搜索
            this.performSearchDatabase();
        },
        addDatabase() {
            // 使用 localStorage 中的账号密码进行添加数据库操作
            if (!this.databaseName) {
                Swal.fire({
                    icon: 'error',
                    title: '错误',
                    text: '请输入数据库名称'
                });
                return;
            }

            // 检查数据库名称是否已存在
            const existing = this.connectedDatabases.find(db => db.name === this.databaseName);
            if (existing) {
                Swal.fire({
                    icon: 'error',
                    title: '错误',
                    text: '数据库名称已存在，请使用其他名称'
                });
                return;
            }

            // 构建数据库对象
            const newDatabase = {
                name: this.databaseName,
                url: this.urlDb,
                username: this.usernameDb,
                password: this.passwordDb
            };

            // 添加到前端数据库列表
            this.connectedDatabases.push(newDatabase);

            // 清空输入框
            this.databaseName = '';

            // 同时保存已连接的数据库列表
            localStorage.setItem('connectedDatabases', JSON.stringify(this.connectedDatabases));

            Swal.fire('成功', '数据库添加成功', 'success');

            // 重新执行搜索
            this.performSearchDatabase();
        },
        removeDatabase(databaseName) {
            if (!databaseName) {
                Swal.fire({
                    icon: 'error',
                    title: '错误',
                    text: '无法识别要删除的数据库名称'
                });
                return;
            }

            // 从前端数据库列表中移除
            this.connectedDatabases = this.connectedDatabases.filter(db => db.name !== databaseName);

            // 同时保存已连接的数据库列表
            localStorage.setItem('connectedDatabases', JSON.stringify(this.connectedDatabases));

            Swal.fire('成功', '数据库删除成功', 'success');

            // 重新执行搜索
            this.performSearchDatabase();
        },
        triggerDbFileUpload() {
            this.$refs.dbFileInput.click();
        },
        async handleDbFileUpload(event) {
            const file = event.target.files[0];
            if (file) {
                console.log('上传的文件:', file.name);

                // 显示上传中的状态
                const loadingSwal = Swal.fire({
                    title: '文件上传中...',
                    html: `正在上传数据库结构文件: ${file.name}`,
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                try {
                    // 模拟上传延迟 3 秒
                    await new Promise((resolve) => setTimeout(resolve, 3000));

                    // 关闭加载提示
                    await loadingSwal.close();

                    // 假设上传成功，更新上传的文件名
                    Swal.fire({
                        icon: 'success',
                        title: '上传成功',
                        text: `数据库结构文件 ${file.name} 上传成功！`,
                        timer: 2000, // 2秒后自动关闭
                        showConfirmButton: false
                    });
                    this.dbUploadedFileName = file.name;

                    // 如果需要，可以在这里执行其他操作，例如重新加载数据或更新界面
                    // this.performSomeOtherAction();
                } catch (error) {
                    // 关闭加载提示
                    await loadingSwal.close();

                    console.error('发生错误:', error);
                    Swal.fire({
                        icon: 'error',
                        title: '上传失败',
                        text: '发生未知错误，数据库结构文件上传失败'
                    });
                }
            }
        },
        // 知识文档配置方法
        triggerDocFileUpload() {
            this.$refs.docFileInput.click();
        },
        async handleDocFileUpload(event) {
            const file = event.target.files[0];
            if (file) {
                console.log('上传的文件:', file.name);

                // 显示上传中的状态
                const loadingSwal = Swal.fire({
                    title: '文件上传中...',
                    html: `正在上传知识文档结构文件: ${file.name}`,
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                try {
                    // 模拟上传延迟 5 秒
                    await new Promise((resolve) => setTimeout(resolve, 5000));

                    // 关闭加载提示
                    await loadingSwal.close();

                    // 假设上传成功，添加到已配置列表
                    this.connectedKnowledgeDocs.push({
                        name: file.name
                    });

                    // 保存到 localStorage
                    localStorage.setItem('connectedKnowledgeDocs', JSON.stringify(this.connectedKnowledgeDocs));

                    // 显示成功提示
                    Swal.fire({
                        icon: 'success',
                        title: '上传成功',
                        text: `知识文档结构文件 ${file.name} 上传成功！`,
                        timer: 2000, // 2秒后自动关闭
                        showConfirmButton: false
                    });

                    // 显示上传的文件名
                    this.docUploadedFileName = file.name;

                    // 重新执行搜索
                    this.performSearchKnowledge();
                } catch (error) {
                    // 关闭加载提示
                    await loadingSwal.close();

                    console.error('发生错误:', error);
                    Swal.fire({
                        icon: 'error',
                        title: '上传失败',
                        text: '发生未知错误，知识文档结构文件上传失败'
                    });
                }
            }
        },
        removeKnowledgeDoc(docName) {
            if (!docName) {
                Swal.fire({
                    icon: 'error',
                    title: '错误',
                    text: '无法识别要删除的知识文档名称'
                });
                return;
            }

            // 从前端知识文档列表中移除
            this.connectedKnowledgeDocs = this.connectedKnowledgeDocs.filter(doc => doc.name !== docName);

            // 同时保存已连接的知识文档列表
            localStorage.setItem('connectedKnowledgeDocs', JSON.stringify(this.connectedKnowledgeDocs));

            Swal.fire('成功', '知识文档删除成功', 'success');

            // 重新执行搜索
            this.performSearchKnowledge();
        },

        // 搜索数据库的方法
        performSearchDatabase() {
            if (!this.searchQueryDatabase) {
                // 如果搜索框为空，则显示全部数据库
                this.filteredDatabases = this.connectedDatabases;
                return;
            }
            const query = this.searchQueryDatabase.toLowerCase();
            this.filteredDatabases = this.connectedDatabases.filter(db =>
                db.name.toLowerCase().includes(query) ||
                db.url.toLowerCase().includes(query) ||
                db.username.toLowerCase().includes(query)
            );
        },

        // 搜索知识文档的方法
        performSearchKnowledge() {
            if (!this.searchQueryKnowledge) {
                // 如果搜索框为空，则显示全部知识文档
                this.filteredKnowledgeDocs = this.connectedKnowledgeDocs;
                return;
            }
            const query = this.searchQueryKnowledge.toLowerCase();
            this.filteredKnowledgeDocs = this.connectedKnowledgeDocs.filter(doc =>
                doc.name.toLowerCase().includes(query)
            );
        },
    }
});
